<template>
	<view class="all">
		<!-- 用户名显示位置 -->
		<!-- 新增好友 -->
		<view class="tj" @click="friend">
			<image src="../../static/tj.png"></image>
			<view class="tj1">
			添加好友
			</view>
		</view>
		<view class="hy" >
			<image src="../../static/user.png"mode=""></image>
			<view class="yh1">你好！{{UserName}}</view>
			
		</view>
		<!-- 搜索框 -->
		<view class="sskall">
			<view class="sskin">
				 <image src="../../static/ss.png" mode=""></image>
				<input type="text" value="" placeholder="搜索好友姓名" @confirm="SearchFriend" />
			</view>
			<view class="" @click="cancle">
				取消
			</view>
		</view>
		<!-- 用户和好友列表显示 -->
		<view class="yfall" v-for="(item,index) in FriendList" :key="index" @click="friend(item)">
			<view class="yfall1">
				<view class="yfall4">
					<image :src="item.UserImg" mode=""></image>
				</view>
				<view class="yfall2">
					<text style="font-size: 48upx; color:#62aa88 ;font-family: KAITI;">{{item.friendName}}</text>
					<text style="font-size: 35upx; color:#aaaa7f ; margin-left: 30upx;">{{item.friendBirthday}}</text>
				</view>
			</view>
			<view class="yfall3">
				距离下一个生日 <text style="color: #7880CA; font-size: 40upx;margin-left: 10upx;margin-right: 10upx;">{{NextBirthdayDays(item.friendBirthday)}}</text> 天
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				UserAccount:"",
				UserName:"",
				FriendList:[{},{}],					
			}
		},
		onLoad() {
			this.UserName=uni.getStorageSync("UserAccount")
			let searchdata={
				"UserAccount":uni.getStorageSync("UserAccount")
			}
			this.search(searchdata)
		},
		methods:{
			cancle(){
				let searchdata={
					UserAccount:this.UserName,
					}
					this.search(searchdata)
			},
			friend(item){
				console.log(item)
				if(item!=null){
					uni.navigateTo({
						url:"../FriendEdit/FriendEdit?&_id="+item._id
					})
				}else{
					uni.navigateTo({
						url:"../FriendEdit/FriendEdit"
					})
				}
			},
			search(searchdata){
				let that = this
				uniCloud.callFunction({
					name:"Search",
					data:searchdata,	
				}).then(res=>{
					console.log("获取朋友信息")
					console.log(res)
					that.FriendList=res.result.data
				})
			},
			SearchFriend(e){
				let that = this
				console.log(e)
				let searchdata={
					"UserAccount":that.UserName,
					"friendName":e.detail.value,
				}
				that.search(searchdata)
			}
		},
		  computed:{
		  	NextBirthdayDays(){
		  		return function(FriBirth){
			 		let nextBirthDays
		 				if(FriBirth!=null){
		 					let BirthTemp=FriBirth.split("-");
		  					let nowDate = new Date();
		 					let Y=nowDate.getFullYear()
			 				let M=[(nowDate.getMonth()+1)<10?("0"+(nowDate.getMonth()+1)):(nowDate.getMonth()+1)]
		 					let D =[nowDate.getDate()<10?("0"+nowDate.getDate()):(nowDate.getDate())]
		  					let today=Y+"-"+M+"-"+D
		  					let Today = new Date(today).getTime();
		 					let leftD=0
		  					let leftDays=0
		  					let n=(parseInt(M)-parseInt(BirthTemp[1]))
		 					if(n==0){
		 						leftD=parseInt(BirthTemp[2])-parseInt(D)
		  						if(leftD<0){
		  							Y=Y+1;
		 						}
		  					}else if(n>0){
						Y=Y+1
		 					}
		  					let nextBirth=Y+"-"+BirthTemp[1]+"-"+BirthTemp[2]
			 				let NextB=new Date(nextBirth).getTime();
		 					nextBirthDays = Math.floor((NextB-Today)/(1000*60*60*24))
		  				}else{
		 					let nextBirthDays =0
		  				}
		  				return nextBirthDays;
					
		  		}
		  	}
		  }
	}
</script>

<style>
	.all{
		
	}
	.hy{
		width: 320upx;
		height: 60upx;
		background-color:#abceb9;
		font-size: 35upx;
		margin-top: 10upx; 
		margin-left: 420upx;
		color: #ffff7f; 
		border-radius: 20upx;
		text-align: center;
	}
	.yh1{
		position: absolute;
		margin-left: 70upx;
		margin-top: 7upx;
	}
	.hy image{
		float: left;
		margin-left: 15upx;
		margin-top: 5upx;
		width: 50upx;
		height: 50upx;
	}
	.sskall{
		background-color: #adc7af;
		display: flex;
		height: 90upx;
		align-items: center;
		padding: 0 20upx;
		justify-content: space-around;
		margin-top: 15upx;
		color: #137F57;
		font-size: 38upx;
		font-weight: 20upx;
	}
	.sskin{
		display: flex;
		background-color: #FFFFFF;
		height: 70upx;
		align-items: center;
		padding-left: 10upx;
		border-radius: 30upx;
		width: 590upx;
	}
	.sskall image{
		width: 50upx;
		height: 50upx;
		padding-right: 10upx;
	}
	.yfall{
		color: #95a9aa;
		align-items: center;
		width: 100%;
		height: 190upx;
		margin-top: 20upx;
		background-color: #e5ebe4;
		
	}
	.yfall1{
		display: flex;
		align-items: center;
	}
	.yfall image{
		width: 105upx;
		height: 105upx;
		margin-right: 10upx;
		border-radius: 50%;
	}
	.yfall2{
		color: #00aa0c;
		line-height: 50upx;
		display: flex;
		flex-direction: column;
	}
	.yfall3{
		margin-left: 370upx;
		text-align: right;
		padding-right: 10upx;
	}
	.yfall4{
		margin: 15upx;
	}
	.tj{
		border-radius: 20upx;
		text-align: center;
		width: 250upx;
		height: 60upx;
		background-color:#abceb9;
		position: absolute;
		margin-left: 13upx;	
		font-size: 36upx;
	}
	.tj image{
		float: left;
		margin-left: 5upx;
		margin-top: 7upx;
		width: 50upx;
		height: 50upx;
	}
	.tj1{
		color: #ffff7f;
		margin-top: 6upx;
	}
</style>
